<template>
  <div>
    <Card style="relative">
      <div class="admsg" v-show="adMsgdiv">
        <input class="finput" type="text" v-model="code" placeholder="编码：">
        <input class="linput" type="text" v-model="name" placeholder="名称：">
        <Button style="width: 30%;margin-right:5px;margin-bottom: 10px;"  @click="cancelEdit">取消</Button>
        <Button style="width: 30%;margin-left:5px;margin-bottom: 10px;" type="primary" @click="submit">提交</Button>
      </div>
      <Button class="execl_btn_six" type="primary" @click="admsg">新增</Button>
      <tables style="width: 482px"  ref="tables" border editable @on-start-edit="startEdit" @on-cancel-edit="cancelEdit" @on-save-edit="editTablemsg"  v-model="datat" :columns="columns" @on-delete="handleDelete"/>
      <!-- 为了占行 -->
      <Button style="margin: 10px 0;visibility: hidden;"></Button>
      <!-- <div style="margin: 10px 0;float: right;">
        <Page :total="totalPageNum" :current="pageindex" :page-size="pagesize" show-elevator show-sizer show-total
        placement="top" @on-change="handlePage" @on-page-size-change='handlePageSize'></Page>
      </div> -->
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { mapActions } from 'vuex'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      adMsgdiv: false,
      codeorname: '',
      id: '',
      code: '',
      name: '',
      totalPageNum: 1,
      pageindex: 1,
      pagesize: 5,
      totalPageNum: 1,
      pageindex: 1,
      pagesize: 5,
      columns: [
        {title: '编码', key: 'code', width: 200, editable: true},
        {title: '名称', key: 'name', width: 200, editable: true},
        {
          title: '删除',
          key: 'handle',
          width: 80,
          options: ['delete'],
          button: [
            (h, params, vm) => {
              return h('Poptip', {
                props: {
                  confirm: true,
                  title: '你确定要删除吗?'
                },
                on: {
                  'on-ok': () => {
                    vm.$emit('on-delete', params)
                    vm.$emit('input', params.datat.filter((item, index) => index !== params.row.initRowIndex))
                  }
                }
              })
            }
          ]
        }
      ],
      datat: []
    }
  },
  created () {
    this.getMsg()
  },
  watch: {
    '$route': 'hide'
  },
  methods: {
    ...mapActions({
      getminTableMsg: 'getminTableMsg',
      adTableMsg: 'adTableMsg',
      deleteTablemsg: 'deleteTablemsg',
      adNewMsg: 'adNewMsg'
    }),
    hide () {
      this.adMsgdiv = false
    },
    handleDelete (value) {
      console.log(value)
      var param = {
        'type': 'classification',
        'id': value.row.id,
        'code': value.row.code,
        'name': value.row.name
      }
      this.deleteTablemsg({ vue: this, param: param }).then(rs => {
        this.code = ''
        this.name = '',
        this.adMsgdiv = false

        this.getMsg()
      }).catch(error => {
        console.log('error')
      })
    },
    handlePage (value) {
      this.pageindex = value
      console.log(value)
      this.getMsg()
    },
    handlePageSize (value) {
      this.pagesize = value
      console.log(value)
      this.getMsg()
    },
    getMsg () {
      var param = {
        'type': 'classification'
      }
      this.getminTableMsg({ vue: this, param: param }).then(rs => {
        console.log('mintablemsg', this.$store.state.user.getmintablemsg)
        this.datat = this.$store.state.user.getmintablemsg
        this.totalPageNum = this.$store.state.user.getmintablemsg.totalPageNum
      }).catch(error => {
        console.log('error')
      })
    },
    admsg () {
      this.adMsgdiv = true
    },
    submit () {
      var param = {
        'id': this.id,
        'code': this.code,
        'name': this.name,
        'type': 'classification'
      }
      this.adTableMsg({ vue: this, param: param }).then(rs => {
        this.id = ''
        this.code = ''
        this.name = ''
        this.adMsgdiv = false
        this.getMsg()
      }).catch(error => {
        console.log('error')
      })
    },
    editTablemsg (value) {
      console.log('value', value)
      console.log(this.code, this.name)
      if (this.codeorname == 'code') {
        var param = {
          'id': value.row.id,
          'code': value.value,
          'name': value.row.name,
          'type': 'classification'
        }
      } else {
        var param = {
          'id': value.row.id,
          'code': value.row.code,
          'name': value.value,
          'type': 'classification'
        }
      }

      this.adTableMsg({ vue: this, param: param }).then(rs => {
        this.id = ''
        this.code = ''
        this.name = '',
        this.adMsgdiv = false

        this.getMsg()
      }).catch(error => {
        console.log('error')
      })
    },
    startEdit (value) {
      console.log('开始', value)
      this.codeorname = value.column.key
    },
    cancelEdit () {
      this.id = ''
      this.code = ''
      this.name = ''
      this.adMsgdiv = false
      console.log('取消')
    }
  }
}
</script>

<style>
  .admsg{
    width: 350px;
    position: absolute;
    top: 25%;
    left: 50%;
    margin-left: -5%;
    background: #dddddd;
    z-index: 10000;
    text-align: center;
    border-radius: 5px;
    padding: 1%;
  }
  .admsg .finput{
    width: 100%;
    height: 30px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 0;
    padding: 0 10px;
    margin-top: 10px;
  }
  .admsg .linput{
    width: 100%;
    height: 30px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 0;
    padding: 0 10px;
  }
  .execl_btn_six{
    margin: 10px 0 10px 425px;
}
</style>
